<template>
  <view class="whe_maxv_view pad_10 boxs he_f">
    <view class="wh_f"
          style="background-color: #ffffff;border: 1px solid #3a9e5f;border-radius: 50px;
            padding: 2px">
      <view class="jz_flex" style="width: 50px">
        <view style="width: 20px">
          <view class="img_zfx">
            <image src="../../static/icon/ss_1.png" />
          </view>
        </view>
      </view>
      <view class="flex_1 czjz_flex">
        <up-input @input="getsiteList" placeholder="限时美味|真材实料看得见......" border="none" v-model="textValue"
                  style="color: #6b8073"></up-input>
      </view>
      <view class="jz_flex" style="height: 35px;width: 80px;background-color: #3a9e5f;border-radius: 50px">
        <text @click="getsiteList" style="color: white">搜索</text>
      </view>
    </view>
    <view class="flex_1">
      <scroll-view class="scrollView" lower-threshold="20" style="height:100%;width: 100%" :scroll-y="true" @scrolltolower="scrolltolower">
        <view style="padding-bottom: 20px">
          <view v-if="list.length>0" class="ba_white bor_10 pad_10 boxs xyy"
                style="margin-top: 10px">
            <view class="wh_f_l bor_b_hui pad_b_10">
              <view>
                当前驿站
              </view>
              <view v-if="false" class="fz_14">
                <image class="icon_wh" src="../img/dh.png" alt=""/>
                <text>导航到驿站</text>
                <image class="icon_jt" src="../../static/icon/right.png" alt=""/>
              </view>
            </view>

            <view class="wh_f_r boxs" style="padding: 10px 10px 0">
              <view style="width: 100px">
                <view class="img_zfx">
                  <image class="" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/03/xcx_1751510090_or1oDQG9AU.png"/>
                </view>
              </view>
              <view class="fz_12 pad_l_5 boxs">
                <view class="wh_f_l ccsl_1">
                  <view>
                    <text class="wz_hei ccsl_1 fz_16 em centerdq">{{ list[0].name }}</text>
                    <!--              <img class="icon_wh centerdq" src="../../static/icon/shoucang.png" alt="">-->
                    <!--              <text class="bor_5 fz_10 centerdq" style="padding: 2px 4px;color: #2a5caa;background-color: #d4deee">公司</text>-->
                  </view>
                  <view class="wz_black fz_12 czjz_flex pad_5_0">
                    <text>距您 {{list[0].distant}} km</text>
                  </view>
                </view>
                <view class="wz_hui">
                  <image class="centerdq" src="../../static/icon/gps_2.png" style="width: 18px;height: 18px"/>
                  <text class="centerdq">{{ list[0].address }}</text>
                </view>
                <view class="wz_hui pad_5_0">
                  <!--            <image class="centerdq" src="../../static/icon/gps_2.png" style="width: 18px;height: 18px"/>-->
                  <text class="centerdq">早08:00至晚20:00营业</text>
                </view>
                <view class="fz_10">
                  <text class="bor_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">到站取</text>
                  <text class="bor_5 mag_0_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">送货上门</text>
                  <text class="bor_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">冷藏冷冻</text>
                </view>
              </view>
            </view>
          </view>
          <up-tabs :list="townList" keyName="name" lineColor="#3a9e5f"
                   itemStyle="padding:10px;box-sizing: border-box;"
                   @change="selTown"></up-tabs>
          <view v-if="siteList.length>0"
                class="ba_white bor_10 mag_t-5 pad_10 xyy">
            <view @click="addsite(item)" v-for="(item,index) in siteList" :key="index" class="wh_f_r pad_5_0 boxs">
              <view style="width: 80px">
                <view class="img_zfx">
                  <image class="" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/03/xcx_1751510090_or1oDQG9AU.png"/>
                </view>
              </view>
              <view class="fz_12 pad_l_5 boxs">

                <view class="wh_f_l">
                  <view class="ccsl_1">
                    <text class="wz_hei  fz_16 em centerdq">{{ item.name }}</text>
                    <img v-if="false " class="icon_wh centerdq" src="../../static/icon/shoucang.png" alt="">
                    <text v-if="false" class="bor_5 fz_10 centerdq" style="padding: 2px 4px;color: #2a5caa;background-color: #d4deee">公司</text>
                  </view>
                  <view class="wz_black fz_12 czjz_flex">
                    <text>距您 {{item.distant}} km</text>
                  </view>
                </view>
                <view class="wz_hui">
                  <image class="centerdq" src="../../static/icon/gps_2.png" style="width: 18px;height: 18px"/>
                  <text class="centerdq">{{ item.address }}</text>
                </view>
                <view class="wz_hui pad_5_0">
                  <!--            <image class="centerdq" src="../../static/icon/gps_2.png" style="width: 18px;height: 18px"/>-->
                  <text class="centerdq">早08:00至晚20:00营业</text>
                </view>
                <view class="wh_f_l">
                  <view class="fz_10">
                    <text class="bor_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">到站取</text>
                    <text class="bor_5 mag_0_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">送货上门</text>
                    <text class="bor_5" style="padding: 1px 5px;color: #e27500;border: 1px solid #ffd166;">冷藏冷冻</text>
                  </view>
                  <view v-if="false" class="wh_f_l wz_lv fz_12 bor_5 boxs" style="padding: 2px 7px;background-color: #d5f0dd">
                    <view class="czjz_flex">
                      <text class="topdq fz_10">查看地图</text>
                    </view>
                    <view class="czjz_flex">
                      <up-icon class="mag_l-5" name="arrow-right" size="10" color="#3a9e5f"></up-icon>
                    </view>
                  </view>
                </view>

              </view>
            </view>
          </view>
          <view v-if="siteList.length<1" class="jz_flex" style="height: 45%">
            <view class="wz_jz">
              <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
              <view class="mag_t-20">暂无驿站!</view>
            </view>
          </view>
          <!--      底部加载提示-->
          <view v-if="jzisTrue === 2" class="wz_jz">
            <view style="height: 40px">
              <text class="centerdq">
                <text class="fz_14" style="margin-right: 10px">加载中</text>
              </text>
              <view class="disp centerdq">
                <view class="jzjdt"></view>
              </view>
            </view>
          </view>
          <view v-if="jzisTrue === 3" class="wz_jz">
            <view style="height: 20px">
              <text class="centerdq">
                <text class="fz_14 wz_qhui">没有更多商品了</text>
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <up-popup customStyle="width:90%;border-radius:10px;" :show="show" mode="center" @close="close" @open="open">
      <view class="boxs" style="padding: 10px 10px 0">
        <view class="wh_f_l pad_10 fz_16">
          <view>
            <text class="wz_lv">平湖银泰百货</text>
            <img class="icon_wh centerdq" src="../../static/icon/shoucang.png" alt="">
            <img class="icon_wh centerdq" src="../../static/icon/qxsc.png" alt="">
            <text class="wz_huang">取消收藏</text>
          </view>
          <view>
            <up-icon @click="show=false" class="mag_l-5" name="close" size="18" color="#383838"></up-icon>
          </view>
        </view>
        <view>
          <view class="pad_5 boxs">
            <view class="wh_f_l pad_10 boxs bor_10 xz" style="background-color: #f8faf7;">
              <view class="fz_20">
                <text>家</text>
              </view>
              <view>
                <img class="img_xz" src="../../static/icon/zfk.png" alt="">
                <img class="img_xz" src="../../static/icon/chenggong.png" alt="">
              </view>
            </view>
          </view>
          <view class="pad_5 boxs">
            <view class="wh_f_l wxz pad_10 boxs bor_10" style="background-color: #f8faf7;">
              <view class="fz_20">
                <text>公司</text>
              </view>
              <view>
                <img class="img_xz" src="../../static/icon/zfk.png" alt="">
                <img class="img_xz" src="../../static/icon/chenggong.png" alt="">
              </view>
            </view>
          </view>
        </view>
        <view class="split_2 mag_t-10">
          <view>
            <view class="wh_9 jz qx_button" style="">取消标签</view>
          </view>
          <view>
            <view class="wh_9 jz qr_button" style="">确认选择</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
<script>
import {getShopStoreList, getTownList, searchdak} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      tabList:[
        {id:1,name: '推荐驿站'},
        {id:2,name: '收藏驿站'},
      ],
      jzisTrue:1,
      show:false,
      page:1,
      siteList:[],
      textValue:'',
      list:[],
      townList:[],
      town_id:0,
      ladd: {},
    }
  },
  watch: {
    // 正确监听方式
    textValue: {
      handler: function(newVal, oldVal) {
        console.log("输入值变化:", newVal);
        // 清除之前的计时器
        clearTimeout(this.debounceTimer);
        // 设置防抖（300ms后执行）
        this.debounceTimer = setTimeout(() => {
          this.getsiteList();
        }, 0);
      },
      immediate: false // 不需要在初始化时执行
    }
  },
  methods:{
    // 分页
    scrolltolower(){
      // 如果 jzisTrue = 3 没有更多数据了
      if(this.jzisTrue === 3){

      }else{
        console.log("触底了")
        this.page += 1
        this.jzisTrue = 2
        // 触底了
        setTimeout(()=>{
          this.jzisTrue = 1
          this.getfyList()
        },1000)
      }
    },
    addsite(e){
      this.list[0] = e
      console.log(e.id)

      uni.setStorageSync('dak',e);

      // let item = JSON.stringify(e)
      setTimeout(()=>{
        uni.$emit('yzid',e)
        uni.navigateBack();
      },500)

    },
    addTab(e){},
    //站点列表
    getsiteList(){
      let jwd = uni.getStorageSync('latAddress');
      this.ladd = JSON.parse(jwd)
      getShopStoreList({
        page:1,
        per_page:20,
        longitude:this.ladd.longitude,
        latitude:this.ladd.latitude,
        search:this.textValue,
        town_id:this.town_id
      }).then(res=>{
        console.log('站点列表',res.data)
        this.siteList = res.data.data
      })
    },
    selTown(e){
      console.log(e)
      this.town_id = e.id
      this.getsiteList()
    },
    getfyList(){
      getShopStoreList({
        page:this.page,
        longitude:this.ladd.longitude,
        latitude:this.ladd.latitude,
        search:this.textValue,
        town_id:this.town_id
      }).then(res=>{
        // 如果没有数据 说明已经没有更多数据了 改变底部加载状态为3
        if(res.data.data.length<1){
          this.jzisTrue = 3
        }else{
          //有数据 正常合并新的数据
          this.siteList = this.siteList.concat(res.data.data); // 或者使用:
        }
      })
    }
  },
  onShow(){
    getTownList().then(res=>{
      let data = res.data
      data.unshift({ id: 0, name: "全部" });
      this.townList = data
      console.log(this.townList)
    })
    let item = uni.getStorageSync('dak');
    if(item){
      this.list[0] = item
    }
    this.getsiteList();
  }
}
</script>
<style scoped lang="scss">
.jzjdt {
  border: 3px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3a9e5f;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.xz{
  border: 2px solid #3a9e5f
}
.wxz{
  border: 2px solid #e4e7e0
}
.img_xz{
  width: 22px;
  height: 22px;
}
.u-popup__content{
  border-radius: 10px;
}
.icon_wh{
  width: 12px;
  height: 12px;
  margin: 0 5px;
}
.icon_jt{
  width: 7px;
  height: 12px;
  margin:0 5px;
}
</style>
